<template>
  <div class="container">
    <Breadcrumb :items="['menu.settingManage', 'menu.setting']" />
    <a-card class="custom-card" title="">
      <a-tabs default-active-key="1" lazy-load>
        <a-tab-pane key="1">
          <template #title>
            <icon-settings/> 系统设置
          </template>
          <system/>
        </a-tab-pane>
        <a-tab-pane key="2">
          <template #title>
            <icon-upload/> 上传设置
          </template>
          <upload/>
        </a-tab-pane>
        <a-tab-pane key="3">
          <template #title>
            <icon-safe/> 支付设置
          </template>
          <payment/>
        </a-tab-pane>
        <a-tab-pane key="4">
          <template #title>
            在线工具
          </template>
          <iframe-manage src="https://tool.lu" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import IframeManage from '@/views/components/iframe.vue';
  import System from './components/system.vue';
  import Upload from './components/upload.vue';
  import Payment from './components/payment.vue';
</script>

<script lang="ts">
  export default {
    name: 'Setting',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }
  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }
</style>
